{include file="common/doc"/}
<style>
    .layui-colla-title {
        background-color: #FFFFFF;
    }

    .laytable-cell-1-0-1 {
        text-align: center;
        height: auto;
        white-space: normal;
    }
    .lgp-upload{
        position:absolute; left: 30%;
        display: none;
    }
    .layui-upload-drag:hover .lgp-upload{
        display: block;
    }

</style>
<body>
<script type="text/html" id="op_table">

    <?php echo $operation['tool'] ?>
</script>
<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <table lay-filter="table_list" id="table_list"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <?php echo $operation['toolbar'] ?>
    </div>
</script>
<template id="form_container" style="display:none;">
    <form class="layui-form" id="form" lay-filter="form">
        <div class="layui-tab " lay-filter="form_edit_tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基本设置</li>
                <li>文章内容</li>
                <li>seo</li>
            </ul>
            <div class="layui-tab-content">
                <!--基本设置-->
                <div class="layui-tab-item  layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章分类</label>
                        <div class="layui-input-inline">
                            <input type="text" id="tree" lay-filter="tree" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">文章标题</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="category_id"/>
                            <input type="text" name="article_title" required lay-verify="required" placeholder="请输入标题"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">文章图片</label>
                        <div class="layui-upload-drag "  style="width: 200px;height: 100px;"lgp-type="file_chooser" lgp-name="video_img">
                            <div class="lgp-upload"> <i class="layui-icon"></i>
                                <p>打开文件管理</p></div>
                            <div class="container"></div>
                            <input type="hidden" name="article_img" value="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="article_author" required lay-verify="required" placeholder="请输入标题"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">简短描述</label>
                        <div class="layui-input-block ">
                            <textarea name="article_desc" class="layui-textarea" cols="50" rows="10"></textarea>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <textarea name="content" id="content" cols="50" rows="10"></textarea>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block ">
                            <input type="text" name="seo_title" class="layui-input">
                            <input type="hidden" name="category_id">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-block ">
                            <input type="text" name="seo_keywords" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block ">
                            <textarea name="seo_desc" class="layui-textarea" cols="50" rows="10"></textarea>
                        </div>
                    </div>
                </div>
                <!--基本设置-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>

</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'table', 'treeSelect', 'layedit', 'tinymce','fileChooser'], function () {
        var $ = layui.$
            , form = layui.form
            , layedit = layui.layedit
            , treeSelect = layui.treeSelect
            , tinymce = layui.tinymce
            , fileChooser = layui.fileChooser
            , table = layui.table;
        table.render({
            elem: '#table_list'
            , height: 'full'
            , skin: 'line'
            , toolbar: '#toolbar'
            , limit: 10
            , url: 'read' + location.search//数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'numbers', title: 'id'},
                {
                    field: 'article_img', align: 'center', title: '封面图', templet: function (d) {
                        return d.article_img ? `<img src="${d.article_img}" width="100" height="100">` : '<img src="/layuiadmin/image/404.jpg" width="100" height="100">';
                    }
                },
                {field: 'article_title', title: '文章标题', align: 'center'},
                {field: 'article_author', title: '文章作者', align: 'center'},
                {field: 'article_desc', title: '简短描述', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#op_table'},
            ]]
        });

        function param() {
            let str = location.search.substring(1).split('=');
            let key = [];
            let val = [];
            str.forEach(function (item, index) {
                if (index % 2 !== 0) {
                    val.push(item);
                } else {
                    key.push(item);
                }
            });
            let obj = {};
            for (let i = 0; i < key.length; i++) {
                obj[key[i]] = val[i];
            }
            return obj;
        }

        function open(data = {}) {
            function treeChooser(input, chooser_node = 0) {
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: '/admin/article_category/read?data_type=tree',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '占位符',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $("input[name=" + input + "]").val(d.current.id);
                    },
                    success: function (d) {
                        treeSelect.checkNode('tree', chooser_node);
                    }

                });
                fileChooser.render();
            }

            function HTMLDecode(input) {
                var converter = document.createElement("DIV");
                converter.innerHTML = input;
                var output = converter.innerText;
                converter = null;
                return output;
            }

            layer.open({
                type: 1,
                maxmin: true,
                title: '菜单编辑',
                area: ['800px', '500px'],
                content: $('#form_container').html(),
                success: function (lay, index) {
                    form.render();
                    let url = 'add';
                    if (JSON.stringify(data) !== '{}') {
                        treeChooser('category_id', data['category_parent']);
                        url = 'upd';
                        data['content'] = HTMLDecode(data['content']);
                        form.val('form', data);
                        $('input[name="article_img"]').prev().html(`<img src="${data.article_img}" style="width: 100% ">`);
                    } else {
                        treeChooser('category_id');
                    }
                    tinymce.render({
                        selector: '#content',
                        height: ' calc(100vh)',
                    });

                    form.render();
                    form.on('submit(form_submit)', function (ewa) {

                        ewa.field['content'] = tinyMCE.activeEditor.getContent();
                        Object.assign(data, ewa.field);
                        Object.assign(data, param());
                        let status = request({'url': url, 'data': data});
                        if (status) {
                            layer.close(index);
                            table.reload('table_list');
                        }
                        return false;
                    });
                }
            })
        }


        table.on('tool(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('upd')) {
                open(obj.data);
            }
            if (event.includes('del')) {
                let status = request({'url': 'del', 'data': {'article_id': obj.data['article_id']}});
                if (status){
                    obj.del();
                }
            }
        });
        table.on('toolbar(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('add')) {
                open();
            }
        });

    });
</script>
</html>
